

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  
  keyboardAvoidingContainer: {
    flex: 1,
  },
  
  scrollContainer: {
    flex: 1,
  },
  
  scrollContentContainer: {
    flexGrow: 1,
    paddingHorizontal: 32,
  },
  
  logoSectionContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 32,
  },
  
  logoContainer: {
    alignItems: 'center',
    marginBottom: 48,
  },
  
  appLogoGradient: {
    width: 96,
    height: 96,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 8,
      },
    }),
  },
  
  appNameText: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#6366f1',
    marginBottom: 8,
  },
  
  appSloganText: {
    fontSize: 14,
    color: '#9ca3af',
  },
  
  loginTypeTabsContainer: {
    flexDirection: 'row',
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 4,
    marginBottom: 32,
    width: '100%',
    maxWidth: 320,
  },
  
  tabButton: {
    flex: 1,
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  activeTabButton: {
    backgroundColor: '#6366f1',
  },
  
  inactiveTabButton: {
    backgroundColor: 'transparent',
  },
  
  tabButtonText: {
    fontSize: 14,
    fontWeight: '500',
  },
  
  activeTabButtonText: {
    color: '#ffffff',
  },
  
  inactiveTabButtonText: {
    color: '#9ca3af',
  },
  
  loginFormContainer: {
    width: '100%',
    maxWidth: 320,
  },
  
  passwordLoginFormContainer: {
    marginBottom: 24,
  },
  
  smsLoginFormContainer: {
    marginBottom: 24,
  },
  
  inputFieldContainer: {
    marginBottom: 16,
  },
  
  inputFieldLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#d1d5db',
    marginBottom: 8,
  },
  
  inputFieldWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: '#374151',
    borderRadius: 12,
    paddingHorizontal: 16,
    height: 48,
  },
  
  textInputField: {
    flex: 1,
    fontSize: 16,
    color: '#ffffff',
    height: '100%',
  },
  
  passwordInputField: {
    paddingRight: 12,
  },
  
  inputFieldIcon: {
    marginLeft: 8,
  },
  
  passwordToggleButton: {
    paddingHorizontal: 12,
    paddingVertical: 12,
  },
  
  smsCodeInputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  
  smsCodeTextInput: {
    flex: 1,
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: '#374151',
    borderRadius: 12,
    paddingHorizontal: 16,
    height: 48,
    fontSize: 16,
    color: '#ffffff',
  },
  
  getSmsCodeButton: {
    borderRadius: 12,
    overflow: 'hidden',
  },
  
  disabledGetSmsCodeButton: {
    opacity: 0.6,
  },
  
  getSmsCodeButtonGradient: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 100,
    height: 48,
  },
  
  getSmsCodeButtonText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#ffffff',
  },
  
  loginOptionsContainer: {
    marginBottom: 24,
  },
  
  checkboxItemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  
  checkboxCustomContainer: {
    width: 20,
    height: 20,
    borderWidth: 2,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  
  checkedCheckboxContainer: {
    backgroundColor: '#6366f1',
    borderColor: '#6366f1',
  },
  
  uncheckedCheckboxContainer: {
    backgroundColor: '#111827',
    borderColor: '#4b5563',
  },
  
  checkboxLabelText: {
    fontSize: 14,
    color: '#d1d5db',
  },
  
  messageContainer: {
    marginBottom: 24,
  },
  
  errorMessageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    borderWidth: 1,
    borderColor: 'rgba(239, 68, 68, 0.3)',
    borderRadius: 12,
    padding: 12,
  },
  
  errorMessageText: {
    fontSize: 14,
    color: '#ef4444',
    marginLeft: 8,
    flex: 1,
  },
  
  successMessageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(16, 185, 129, 0.1)',
    borderWidth: 1,
    borderColor: 'rgba(16, 185, 129, 0.3)',
    borderRadius: 12,
    padding: 12,
  },
  
  successMessageText: {
    fontSize: 14,
    color: '#10b981',
    marginLeft: 8,
    flex: 1,
  },
  
  loginButton: {
    borderRadius: 12,
    overflow: 'hidden',
    marginBottom: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 6,
      },
    }),
  },
  
  disabledLoginButton: {
    opacity: 0.6,
  },
  
  loginButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    paddingHorizontal: 24,
    minHeight: 56,
  },
  
  loginButtonText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
  },
  
  loginLoadingSpinner: {
    marginLeft: 8,
  },
  
  switchLoginTypeContainer: {
    alignItems: 'center',
  },
  
  switchLoginTypeLink: {
    fontSize: 14,
    color: '#6366f1',
  },
});

